[#assign dict = {"1" : "是", "0" : "否"}]
[#assign proState = {"0" : "待审核", "1" : "已发布", "2" : "退回修改", "3" : "重新审核"}]
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
    <link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/res/third/bootstrap3/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="panel panel-info panel-content" style="margin: 0;">
[#if company??]
    供应商：${company.companyName!}
[/#if]
    <div class="panel-heading">
        <form id="soform" method="post" >
            [#if company??]
                <input type="hidden" name="companyId" value="${company.id!}">
            [/#if]
            <table>
                <tr>
                    [#if !company??]
                    <td class="w120">
                        <select class="form-control" id="tab" name="tab">
                            <option value="1" [#if tab == 1]selected[/#if]>已上架</option>
                            <option value="2" [#if tab == 2]selected[/#if]>待审核</option>
                            <option value="3" [#if tab == 3]selected[/#if]>已下架</option>
                            <option value="4" [#if tab == 4]selected[/#if]>未通过审核</option>
                        </select>
                    </td>
                    [/#if]
                    <td>
                        <input type="text" class="form-control" name="keyword" value="${keyword!}" placeholder="商品名称[#if !company??]、供应商名称[/#if]">
                    </td>
                    <td class="w80">
                        <label class="center-block">发布时间</label>
                    </td>
                    <td style="width: 260px;">
                        <input type="text" id="sdate" name="sdate" readonly value="${sdate!}" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'edate\')}'})" class="form-control Wdate" style="width:120px; display: inline-block;">
                        -
                        <input type="text" id="edate" name="edate" readonly value="${edate!}" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'sdate\')}'})" class="form-control Wdate" style="width:120px; display: inline-block;">
                    </td>
                    <td>
                        <button class="btn btn-primary" type="button" onclick="sosuo()">搜索</button>
                        <span style="margin-left: 5px;">共找到${skuCount!0}个商品信息</span>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <table class="table table-hover table-bordered table-striped table-condensed">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>所属类别</th>
            <th>品牌</th>
            <th>供应商</th>
            <th>是否自营</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        </thead>
    [#list pagination.list as pro]
        <tr>
            <td>
                <a href="http://${WEB_SITE!}/offer/${pro.id!}.html" target="_blank">${pro.name!}</a>
            </td>
            <td>${pro.cateName!}</td>
            <td>${pro.brandName!}</td>
            <td>${pro.companyName!}</td>
            <td>${dict[pro.proIfSelf?string]}</td>
            <td>${pro.pubdate!}</td>
            <td>
                <button class="btn btn-info btn-xs" onclick="showSku(${pro.id!})" type="button">规格</button>
                [#if !company??]
                [#if tab == 1]
                    <button class="btn btn-info btn-xs" onclick="down(${pro.id!})" type="button">下架</button>
                [/#if]
                [#if tab == 3]
                    <button class="btn btn-info btn-xs" onclick="up(${pro.id!})" type="button">上架</button>
                [/#if]
                <button class="btn btn-info btn-xs" onclick="edit(${pro.id!})" type="button">修改</button>
                [/#if]
                [#if company??]
                    <button class="btn btn-info btn-xs" onclick="showEditCenPrice(${pro.id!})" type="button">集采价</button>
                [/#if]
                    <button class="btn btn-info btn-xs" onclick="showEditHotPrice(${pro.id!})" type="button">爆品价</button>
            </td>
        </tr>
    [/#list]
    </table>

    <div class="panel-footer">[@fenye p = pagination form = 'infoForm' /]</div>
</div>

<script type="text/html" id="skuTableTemplate">
    <table class="table table-hover table-bordered table-striped table-condensed" style="width: 500px;">
        <thead>
        <tr>
            <th width="50%">规格</th>
            <th width="10%">市场价</th>
            <th width="10%">会员价</th>
            <th width="10%">集采价</th>
            <th width="10%">爆品价</th>
            <th width="10%">库存</th>
        </tr>
        </thead>
        {{# $.each(d, function() { }}
        <tr>
            <td>{{this.skuStr||''}}</td>
            <td>￥{{this.price||0}}</td>
            <td>￥{{this.memberPrice||0}}</td>
            <td>￥{{this.cenPrice||0}}</td>
            <td>￥{{this.hotPrice||0}}</td>
            <td>{{this.stockQuantity}}</td>
        </tr>
        {{# }) }}
    </table>
</script>

<script type="text/html" id="editCenPriceTemplate">
    <table class="table table-hover table-bordered table-striped table-condensed" style="width: 500px;" id="cenPriceTable">
        <thead>
        <tr>
            <th width="40%">规格</th>
            <th width="10%">市场价</th>
            <th width="10%">会员价</th>
            <th width="20%">集采价</th>
            <th width="10%">爆品价</th>
            <th width="10%">库存</th>
        </tr>
        </thead>
        {{# $.each(d, function() { }}
        <tr data-skuid="{{this.id}}">
            <td>{{this.skuStr||''}}</td>
            <td>￥{{this.price||0}}</td>
            <td>￥{{this.memberPrice||0}}</td>
            <td>
                <input type="text" value="{{this.cenPrice||0}}" class="form-control input-xs">
            </td>
            <td>￥{{this.hotPrice||0}}</td>
            <td>{{this.stockQuantity}}</td>
        </tr>
        {{# }) }}
    </table>
    <div style="text-align: center; padding-right: 8px; margin-top: 8px;">
        <button type="button" class="btn btn-primary btn-xs" onclick="saveCenPrice()">保存</button>
    </div>
</script>

<script type="text/html" id="editHotPriceTemplate">
    <table class="table table-hover table-bordered table-striped table-condensed" style="width: 500px;" id="hotPriceTable">
        <thead>
        <tr>
            <th width="40%">规格</th>
            <th width="10%">市场价</th>
            <th width="10%">会员价</th>
            <th width="10%">集采价</th>
            <th width="20%">爆品价</th>
            <th width="10%">库存</th>
        </tr>
        </thead>
        {{# $.each(d, function() { }}
        <tr data-skuid="{{this.id}}">
            <td>{{this.skuStr||''}}</td>
            <td>￥{{this.price||0}}</td>
            <td>￥{{this.memberPrice||0}}</td>
            <td>￥{{this.cenPrice||0}}</td>
            <td>
                <input type="text" value="{{this.hotPrice||0}}" class="form-control input-xs">
            </td>
            <td>{{this.stockQuantity}}</td>
        </tr>
        {{# }) }}
    </table>
    <div style="text-align: center; padding-right: 8px; margin-top: 8px;">
        <button type="button" class="btn btn-primary btn-xs" onclick="saveHotPrice()">保存</button>
    </div>
</script>

<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/bootstrap3/bootstrap.min.js" type="text/javascript"></script>
<script src="/res/third/bootstrap3/bootstrap-select.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/layer/layer.js" type="text/javascript"></script>
<script src="/res/third/laytpl/laytpl.js" type="text/javascript"></script>
<script src="/res/common/js/jQuery.numInput.js"></script>
<script src="/res/third/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
    var dialog;
    function sosuo(){
        var lpath =location.pathname;
        var pageNo = 1;
        $("#soform").attr("action",lpath+"?pageNo="+pageNo);
        $("#soform").submit();
    }

    function edit(productId) {
        top.addTempTab("/product/editProduct.do?productId=" + productId);
    }

    function down(productId) {
        $.ajax({
            url : '/product/downProduct.do',
            type : 'post',
            dataType : 'json',
            data : {productId : productId},
            beforeSend : function() {
                layer.load(2, {shade : 0.3});
            },
            success : function(res) {
                if(res && res.success) {
                    alert('操作成功');
                    location.reload();
                } else {
                    alert('操作失败');
                }
            },
            complete : function () {
                layer.closeAll('loading');
            }
        })
    }

    function up(productId) {
        $.ajax({
            url : '/product/upProduct.do',
            type : 'post',
            dataType : 'json',
            data : {productId : productId},
            beforeSend : function() {
                layer.load(2, {shade : 0.3});
            },
            success : function(res) {
                if(res && res.success) {
                    alert('操作成功');
                    location.reload();
                } else {
                    alert('操作失败');
                }
            },
            complete : function () {
                layer.closeAll('loading');
            }
        })
    }
    
    function showSku(productId) {
        $.ajax({
            url : '/product/listSku.do',
            type : 'post',
            dataType : 'json',
            data : {productId : productId},
            beforeSend : function() {
                layer.load(2, {shade : 0.3});
            },
            success : function(res) {
                if(res && res.success) {
                    dialog = art.dialog({
                        title : "规格组合",
                        lock : true,
                        content : laytpl($('#skuTableTemplate').html()).render(res.obj)
                    });
                }
            },
            complete : function () {
                layer.closeAll('loading');
            }
        })
    }

    function showEditCenPrice(productId) {
        $.ajax({
            url : '/product/listSku.do',
            type : 'post',
            dataType : 'json',
            data : {productId : productId},
            beforeSend : function() {
                layer.load(2, {shade : 0.3});
            },
            success : function(res) {
                if(res && res.success) {
                    dialog = art.dialog({
                        title : "集采价",
                        lock : true,
                        content : laytpl($('#editCenPriceTemplate').html()).render(res.obj)
                    });
                    $('#cenPriceTable input[type=text]').numInput();
                }
            },
            complete : function () {
                layer.closeAll('loading');
            }
        })
    }

    function showEditHotPrice(productId) {
        $.ajax({
            url : '/product/listSku.do',
            type : 'post',
            dataType : 'json',
            data : {productId : productId},
            beforeSend : function() {
                layer.load(2, {shade : 0.3});
            },
            success : function(res) {
                if(res && res.success) {
                    dialog = art.dialog({
                        title : "爆品价",
                        lock : true,
                        content : laytpl($('#editHotPriceTemplate').html()).render(res.obj)
                    });
                    $('#hotPriceTable input[type=text]').numInput();
                }
            },
            complete : function () {
                layer.closeAll('loading');
            }
        })
    }

    function saveCenPrice() {
        var param = '';
        $.each($('#cenPriceTable tbody tr'), function() {
            var skuId = $(this).attr('data-skuid');
            var cenPrice = $(this).find('input:first').val();
            param += 'skuId=' + skuId + '&cenPrice=' + cenPrice + '&';
        });
        if(param != '') {
            param = param.substring(0, param.length - 1);
            $.ajax({
                url : '/product/updateCenPrice.do',
                type : 'post',
                dataType : 'json',
                data : param,
                beforeSend : function() {
                    layer.load(2, {shade : 0.3});
                },
                success : function(res) {
                    if(res && res.success) {
                        alert('操作成功');
                        dialog.close();
                    } else {
                        alert('操作失败');
                    }
                },
                complete : function () {
                    layer.closeAll('loading');
                }
            });
        }
    }

    function saveHotPrice() {
        var param = '';
        $.each($('#hotPriceTable tbody tr'), function() {
            var skuId = $(this).attr('data-skuid');
            var hotPrice = $(this).find('input:first').val();
            param += 'skuId=' + skuId + '&hotPrice=' + hotPrice + '&';
        });
        if(param != '') {
            param = param.substring(0, param.length - 1);
            $.ajax({
                url : '/product/updateHotPrice.do',
                type : 'post',
                dataType : 'json',
                data : param,
                beforeSend : function() {
                    layer.load(2, {shade : 0.3});
                },
                success : function(res) {
                    if(res && res.success) {
                        alert('操作成功');
                        dialog.close();
                    } else {
                        alert('操作失败');
                    }
                },
                complete : function () {
                    layer.closeAll('loading');
                }
            });
        }
    }
</script>
</body>
</html>